<template>
    <div class="shop">
        <div v-for="(p,i) in this.list" :key="i" style="width:50%;margin-top:5px;text-align: center;" @click="shopping(p)">
            <img :src="p.products.coverUrl" style="width:50%"/>
            <div style="width:200px">
                <span v-if="p.products.couponLabelDesc" style="border:1px solid red;color:red;font-size:10px">{{p.products.couponLabelDesc}}</span>
                <span v-else></span>
                <span style="font-size:15px">{{p.products.name.length>15 ? p.products.name.substring(0,16) + '...' : p.products.name}}</span><br>
                <span>￥{{p.products.maxPrice}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            list:[]
        }
    },
    created(){
        axios('/ms/store/api/hotproduct_v2/gets?limit=60&offset=0').then(
            resp=>{
                this.list=resp.data.data.hotProduct
            }
        )
    },
    methods:{
        shopping(s){
            // console.log(s.productId)
            this.$router.push({name:'shop',params:{id:s.productId}})  
        }
    }
}
</script>

<style lang='scss' scoped>
.shop{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
}
</style>